<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-7-14
  Time: 下午2:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>通讯录</title>
    <style>
        .address {
            width: 150px;
            height: 30px;
            text-align: left;
        }

        .model3class {
            display: none;
            margin-top: 10px;
        }
    </style>
    <script src="/static/bootstrap/js/bootstrap-paginator.js"></script>
    <script src="/static/datepicker/WdatePicker.js"></script>
    <script>
        $(function () {
            var totalPage = $("#totalPage").val();
            var currentPage = $("#currentPage").val();
            var options = {
                bootstrapMajorVersion: 3,
                currentPage: currentPage,
                totalPages: totalPage,
                size: "normal",
                alignment: "center",
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (e, originalEvent, type, page) {
                    window.location.href = '/note/contacts/list/' + page;
                }
            }
            $("#pager").bootstrapPaginator(options);

            $("#selectAll").on("click", function () {
                if ($(this).is(":checked")) {
                    $(":checkbox").prop("checked", "true");
                } else {
                    $(":checkbox").removeAttr("checked");
                }
            });

            var models = $("[id^=model_]");
            for (var i = 0; i < models.length; i++) {
                models.eq(i).on("click", function () {
                    if ($("#model_3").is(":checked")) {
                        $(".model3class").show();
                        $("#address").attr("disabled", "true");
                    }
                    else {
                        $(".model3class").hide();
                        $("#address").removeAttr("disabled");
                    }
                    if($("#model_4").is(":checked")){
                        $("#address").val(" ");
                        $("#address").attr("disabled", "true");
                    }
                    else{
                        $("#address").val("");
                        $("#address").removeAttr("disabled");
                    }
                })
            }
        })

        function addContacts() {
            window.location.href = "/note/contacts";
        }

        function delContacts() {
            var guid = $("#delete").data("contactsguid");
            window.location.href = "/note/contacts/del/" + guid;
        }

        function delMoreContacts() {
            var guid = $(":checkbox:checked").not("#selectAll");
            var guids = '';
            for (var i = 0; i < guid.length; i++) {
                guids += i == guid.length - 1 ? guid.eq(i).val() : guid.eq(i).val() + ',';
            }
            window.location.href = "/note/contacts/delmore/" + guids;
        }

        function sendNotes() {
            $("#selectModel").css("display", "block");
            $("#sure").click(function () {
                var model = $(":radio:checked");
                if (model.length === 0) {
                    alert("请选择短信模版");
                } else if ($("#model_3").is(":checked")) {
                    var checkboxes = $(":checkbox:checked").not("#selectAll");
                    var guids = '';
                    if (checkboxes.length === 0) {
                        alert("请选择客户");
                    } else {
                        var signTime = $("#signTime").val();
                        var signAddress = $("#signAddress").val();
                        var signContact = $("#signContact").val();
                        var signPhone = $("#signPhone").val();
                        if (signTime == "" || signAddress == "" || signContact == "" || signPhone == "") {
                            alert("签约信息不能为空");
                        } else {
                            for (var i = 0; i < checkboxes.length; i++) {
                                guids += checkboxes.eq(i).val() + ",";
                            }
                            var modelValue = $(":radio:checked").next("span").attr("title");
                            $.ajax({
                                url: '/note/send_notes',
                                type: 'post',
                                dataType: 'json',
                                data: {guids: guids, modelGuid: model.val(), modelValue: modelValue, signTime: signTime, signAddress: signAddress, signContact: signContact, signPhone: signPhone},
                                success: function () {
                                    location.reload();
                                    $(":checkbox").removeAttr("checked");
                                    $("#signTime").val("");
                                }
                            })
                        }
                    }
                } else {
                    var checkboxes = $(":checkbox:checked").not("#selectAll");
                    var guids = '';
                    if (checkboxes.length === 0) {
                        alert("请选择客户");
                    } else {
                        var address = $("#address").val();
                        if (address === "") {
                            alert("联系地址不能为空");
                        } else {
                            for (var i = 0; i < checkboxes.length; i++) {
                                guids += checkboxes.eq(i).val() + ",";
                            }
                            var modelValue = $(":radio:checked").next("span").attr("title");
                            $.ajax({
                                url: '/note/send_notes',
                                type: 'post',
                                dataType: 'json',
                                data: {guids: guids, modelGuid: model.val(), modelValue: modelValue, address: address},
                                success: function () {
                                    location.reload();
                                    $(":checkbox").removeAttr("checked");
                                }
                            });
                        }
                    }
                }
            })
        }

        function delMore() {
            var guid = $(":checkbox:checked").not("#selectAll");
            if (guid.length > 0) {
                $('#myModal').on('shown.bs.modal',function (e) {
                    $("#myModalLabel").html("删除联系人");
                    $(".modal-body").html("确定要删除所选联系人?");
                    var content = '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" onclick="delMoreContacts()">确定</button>';
                    $(".modal-footer").html(content);
                }).modal('toggle');
            }
        }

        function model() {
            $('#myModal').on('shown.bs.modal',function (e) {
                $("#myModalLabel").html("删除联系人");
                $(".modal-body").html("确定要删除该联系人?");
                var content = '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" onclick="delContacts()">确定</button>';
                $(".modal-footer").html(content);
            }).modal('toggle');
        }

    </script>
</head>
<body>
<div>
    <div>
        <span style="float: left;">
            <button type="button" class="btn btn-primary" onclick="addContacts()" title="添加联系人">新增</button>
            <button type="button" class="btn btn-info" onclick="delMore()" title="删除联系人">批量删除</button>
            <button type="button" class="btn btn-info" onclick="sendNotes()" title="发送短信">批量发送</button>
        </span>
        <span style="width:800px;display: none;margin-left: 240px;" id="selectModel">
            <c:forEach items="${messageModelDTOs}" var="model" varStatus="status">
                <label>
                    <input type="radio" name="model" id="model_${status.index+1}" value="${model.guid}"/>
                    <span title="${model.value}">模版${status.index+1}</span>
                </label>
            </c:forEach>
            <label>
                <input type="radio" name="model" id="model_3" value="${modelSecond.guid}"/>
                <span title="${modelSecond.value}">模版3</span>
            </label>
             <label>
                 <input type="radio" name="model" id="model_4" value="${modelNotice.guid}"/>
                 <span title="${modelNotice.value}">模版4</span>
             </label>
            <%--<label>--%>
                <%--<input type="radio" name="model" id="model_1" value="first"/>--%>
                <%--<span title="尊敬的客户，您购买的漫庭度假屋xxx产品已成功支付xxx。我们将会在七个工作日内与您预约签约，地址：xxx。请您保持手机畅通。详询：400-831-3336【漫庭网】">模版一</span>--%>
            <%--</label>--%>
            <%--<label>--%>
                <%--<input type="radio" name="model" id="model_2" value="second"/>--%>
                <%--<span title="尊敬的客户，您购买的漫庭度假屋xxx产品已成功支付xxx。请您于一周之内前往漫庭会员之家缴纳剩余款项xxx并签署合约，我们将会安排专人接待，地址：xxx。详询400-831-3336【漫庭网】">模版二</span>--%>
            <%--</label>--%>
            <%--<label>--%>
                <%--<input type="radio" name="model" id="model_3" value="third">--%>
                <%--<span title="尊敬的客户您好！您购买的漫庭度假屋xxx产品xxx元，已经可以签署合约，请您于xxxx年xx月xx日xx时前往漫庭网进行签约，签约地址：xxx，联系人：xxx，联系人电话：xxx。详询：400-831-3336【漫庭网】">模版三</span>--%>
            <%--</label>--%>
                <input type="text" id="address" class="address" placeholder="联系地址">
            <input type="button" id="sure" class="btn btn-primary" value="确定"/>
        </span>
    </div>
    <div class="model3class">
        <label>
            签约时间：<input type="text" class="text01 Wdate"
                        onclick="WdatePicker({isShowOK: false,dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="signTime"/>
        </label>
        <label>
            签约地址：<input type="text" id="signAddress"/>
        </label>
        <label>
            签约联系人：<input type="text" id="signContact"/>
        </label>
        <label>
            签约联系电话：<input type="text" id="signPhone"/>
        </label>
    </div>
    <div style="clear: left">
        <table class="table table-striped" data-row-style="rowStyle">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="selectAll"/>
                    </th>
                    <th>客户姓名</th>
                    <th>所在区域</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <th>购买产品</th>
                    <th>产品价格</th>
                    <th>已付金额</th>
                    <th>剩余金额</th>
                    <th>度假周次</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            <c:forEach items="${contactsDTOs}" var="contacts">
                <tr>
                    <td><input type="checkbox" value="${contacts.guid}"></td>
                    <td>${contacts.cusName}</td>
                    <td>${contacts.area}</td>
                    <td>${contacts.gender}</td>
                    <td>${contacts.phone}</td>
                    <td>${contacts.product}</td>
                    <td>${contacts.price}</td>
                    <td>${contacts.paid}</td>
                    <td>${contacts.remainder}</td>
                    <td>${contacts.week}</td>
                    <td>
                        <a href="/note/contacts/update/${contacts.guid}">修改</a>&nbsp;
                        <a href="javascript:model()" id="delete" data-contactsguid="${contacts.guid}">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    <div>
        <input type="hidden" id="totalPage" value="${totalPage}">
        <input type="hidden" id="currentPage" value="${currentPage}">
        <ul id="pager"></ul>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>
</body>
</html>